// 导入 React，用来创建 react 元素的
import React from 'react';
// 导入对应渲染平台库
import ReactDOM from 'react-dom/client';

// 导入样式
import './index.css';

// 渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// JSX 中样式的指定
// 1、 行内样式
const h1 = (
  <h1 style={{ color: 'red', 'background-color': 'blue', width: '60%' }}>
    123
  </h1>
);

// 状态
const loading = false;

// 2、类名的样式
const h2 = <h1 className={loading ? 'loading-title' : 'done-title'}>123</h1>;

// 渲染到页面上
root.render(
  <div>
    {h1}
    {h2}
  </div>
);
